<template>
  <div :class="[activeLeftBottomClass]" v-if="dataArray[0]">
    <img :src="dataArray[0].iconUrl || defaultIcon">
    <p>{{ dataArray[0].name || '活动' }}</p>
  </div>
</template>

<script>
export default {
  props: {
    dataArray: Object,
    typeFrom: String,
  },
  data() {
    return {
      defaultIcon: require('@/assets/images/active/active-left-bottom.png'),
      activeLeftBottomClass: '',
    }
  },
  created() {
    if (this.typeFrom == 'psBack') {//竖屏回看
      this.activeLeftBottomClass = 'active-left-bottom-ps';
    } else {
      this.activeLeftBottomClass = 'active-left-bottom';
    }
  },
  methods: {
  }
}
</script>

<style scoped="scoped" lang="less">
.active-left-bottom {
  width: fit-content;
  height: 43px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 15px 0 12px;
  position: absolute;
  bottom: 550px;
  left: 30px;
  z-index: 11;

  img {
    width: 24px;
    height: 24px;
  }

  p {
    font-size: 22px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 24px;
    margin-left: 8px;
  }
}

.active-left-bottom-ps {
  width: fit-content;
  height: 43px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 15px 0 12px;

  img {
    width: 24px;
    height: 24px;
  }

  p {
    font-size: 22px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 24px;
    margin-left: 8px;
  }
}</style>
